<div class="tenways-slideshow" id="Slideshow-{{ section.id }}">
  <div class="{% unless section.settings.full_width %} page-width{% endunless %}">
     <div class="slideshow_line">
       {%- if section.settings.title != blank -%}
       <div class="title-wrapper">        
          <h2 class="title">
           {{ section.settings.title | escape }}
          </h2>      
       </div>
       {%- endif -%}
       <div class="slider-slideshow">
         <div class="swiper-father">
           <div class="slideshow-tenways-container swiper-container">
               <div class="swiper-wrapper">
               {%- for block in section.blocks -%}
                 <div class="swiper-slide tenways-slide">
                   <div class="multicolumn-card">
                     <div class="pc-banner banner__media media"
                     {% if block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 | floor }}%;"{% endif %}
                     >
                     {%- if block.settings.image != blank -%}
                     <img
                       class="pc_banner"
                       srcset="
                     {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
                     {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
                     {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
                     {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}"
                     src="{{ block.settings.image | img_url: '1500x' }}"
                     loading="lazy"
                     alt="{{ block.settings.image.alt | escape }}"
                     width="{{ block.settings.image.width }}"
                     height="{{ block.settings.image.height }}"
                     >
                     {%- endif -%}
                     </div>

                     <div class="mb-banner banner__media media"
                     {% if block.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image_mobile.aspect_ratio | times: 100 | floor }}%;"{% endif %}
                     >
                       {%- if block.settings.image_mobile != blank -%}
                           <img
                             srcset="
                           {%- if block.settings.image_mobile.width >= 1780 -%}{{ block.settings.image_mobile | img_url: '1780x' }} 1780w,{%- endif -%}
                           {%- if block.settings.image_mobile.width >= 2000 -%}{{ block.settings.image_mobile | img_url: '2000x' }} 2000w,{%- endif -%}
                           {%- if block.settings.image_mobile.width >= 3000 -%}{{ block.settings.image_mobile | img_url: '3000x' }} 3000w,{%- endif -%}
                           {%- if block.settings.image_mobile.width >= 3840 -%}{{ block.settings.image_mobile | img_url: '3840x' }} 3840w,{%- endif -%}"
                           src="{{ block.settings.image_mobile | img_url: '1500x' }}"
                           loading="lazy"
                           alt="{{ block.settings.image_mobile.alt | escape }}"
                           width="{{ block.settings.image_mobile.width }}"
                           height="{{ block.settings.image_mobile.height }}"
                           >                       
                     {%- endif -%}
                     </div>

                   </div>
                   <div class="slideshow-text">
                     <div class="page-width">
                        <div class="list">
                           {% if block.settings.text_1 != blank %}
                           <div class="text text_1">{{ block.settings.text_1 }}</div>
                           {% endif %}
                           {% if block.settings.text_2 != blank %}
                           <div class="text text_num numtext_2"> 
                            <span class="num">{{ block.settings.num  }}{% if block.settings.num_2 != blank %} 
                              <span>{{ block.settings.num_2 }}</span> 
                           {% endif %}
                          </span>                                 
                              {{ block.settings.text_2 }}
                          </div>
                           {% endif %}
                           {% if block.settings.text_4 != blank %}
                           <div class="text text_4"> {{ block.settings.text_4 }}</div>
                           {% endif %}
                        </div>
                     </div>
                   </div>
                 </div>
                {%- endfor -%}
               </div>
           </div>
           <div class="swiper-pagination"></div>
         </div>
       </div>
     </div>
   </div>
</div>



<script>
   var swiper = new Swiper('.slideshow-tenways-container', {
     slidesPerView: 1,
     loop: true,
     autoplay: {
         delay: 7000,
         disableOnInteraction: false,
       },
     pagination: {
       el: ".swiper-pagination",
       clickable: true,
     },
   });
</script>

{% schema %}
{
 "name": "Tenways Slideshow",
 "class": "spaced-section spaced-section--full-width slideshow-about",
 "tag": "section",
 "settings": [
   {
     "type": "text",
     "id": "title",
     "default": "slideshow",
     "label": "slideshow"
   },
   {
       "type": "checkbox",
       "id": "full_width",
       "label": "t:sections.video.settings.full_width.label",
       "default": false
     }
 ],
 "blocks": [
   {
     "type": "image",
     "name": "image",
     "settings": [
       {
         "type": "image_picker",
         "id": "image",
         "label": "t:sections.multicolumn.blocks.column.settings.image.label"
       },
       {
         "type": "image_picker",
         "id": "image_mobile",
         "label": "Mobile image"
       },
       {
           "type": "text",
           "id": "text_1",
           "label": "t:sections.multicolumn.blocks.column.settings.text.label"
       },
       {
        "type": "text",
        "id": "num",
        "label": "Num"
       },
       {
         "type": "text",
         "id": "text_2",
         "label": "Text 2"
       },
       {
        "type": "text",
        "id": "num_2",
        "label": "Num 2"
       },
      {
        "type": "text",
        "id": "text_4",
        "label": "Text 4"
      },
       {
         "type": "text",
         "id": "button_label_1",
         "default": "Button label",
         "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
         "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
       },
       {
         "type": "url",
         "id": "button_link_1",
         "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
       }
     ]
   }
 ],
 "presets": [
   {
     "name": "Tenways Slideshow",
     "blocks": [
       {
         "type": "image"
       },
       {
         "type": "image"
       }
     ]
   }
 ]
}
{% endschema %}
